<template>
  <!-- 订单详情页面 -->
  <el-dialog :visible.sync="visible" title="订单详情" :close-on-click-modal="true" :close-on-press-escape="true" @close="cancellation">
    <div class="flex_columns" style="">
      <div class="flex_columns orderBg">
        <div style="font-size: 24px;color: #000000">{{getDictLabel('order_status',dataForm.orderStatus)}}</div>
        <div class="orderTitle" style="margin-top: 10px;" v-if="dataForm['receiveDate']">
          {{dataForm['receiveDate']}}用户确认收货 | {{dataForm['settlementDate']}}完成资金结算
        </div>
      </div>
      <div class="flex_columns orderBg" style="margin-top: 20px;">
        <div style="font-size: 24px;color: #000000">订单信息</div>
        <div class="flex_wrap flex_center flex_between">
          <div class="flex_rows flex_center orderCk">
            <div class="orderTitle">订单号</div>
            <div>{{dataForm.id}}</div>
          </div>
          <div class="flex_rows flex_center orderCk" v-if="dataForm.plateMakingFee">
            <div class="orderTitle">制版费</div>
            <div>￥{{formatNumber(dataForm.plateMakingFee)}}</div>
          </div>
          <div class="flex_rows flex_center orderCk">
            <div class="orderTitle">{{dataForm.orderType===2?'包装酒金额':'支付金额'}}</div>
            <div>￥{{formatNumber(dataForm.totalAmount)}}</div>
          </div>
          <div class="flex_rows flex_center orderCk" v-if="dataForm.orderType===2">
            <div class="orderTitle">定制总金额</div>
            <div>￥{{formatNumber(dataForm.totalAmount+dataForm.plateMakingFee)}}</div>
          </div>
          <div class="flex_rows flex_center orderCk" v-if="dataForm['payDate']">
            <div class="orderTitle">支付时间</div>
            <div>{{dataForm.payDate}}</div>
          </div>
          <div class="flex_rows flex_center orderCk">
            <div class="orderTitle">支付方式</div>
            <div>{{getDictLabel('pay_way',dataForm.payWay)}}</div>
          </div>
          <div class="flex_rows flex_center orderCk" style="width: 100%;" v-if="dataForm['transactionId']">
            <div class="orderTitle">交易ID</div>
            <div>{{dataForm.transactionId}}</div>
          </div>
          <div class="flex_rows flex_center orderCk" style="width: 100%;">
            <div class="orderTitle">订单备注</div>
            <div v-if="dataForm.remark">{{dataForm.remark}}</div>
            <div v-else>未填写</div>
          </div>
        </div>
      </div>
      <div class="flex_columns orderBg" v-if="dataForm.dtlList">
        <div style="font-size: 24px;color: #000000">商品详情</div>
        <div class="flex_columns" style="margin-top: 20px;">
          <div class="flex_center flex_rows" style="margin-bottom: 10px;" v-for="(item,index) in dataForm.dtlList" :key="index">
            <div style="margin-right: 10px;">
              <el-image
                  style="width: 100px; height: 100px;border-radius: 5px;"
                  :src="item.imgUrl"
                  :preview-src-list="[item.imgUrl]"></el-image>
            </div>
            <div class="flex_columns " style="width: 70%;">
              <div style="">商品名称：{{item.productName}}</div>
              <div style="margin-top: 10px;">商品规格：{{item.specsDesc}}</div>
              <div style="margin-top: 10px;">价格：{{ formatNumber(item.buyPrice)}}</div>
              <div style="margin-top: 10px;">数量：{{item.buyCount}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex_columns orderBg" style="margin-top: 20px;" v-if="dataForm.orderType===2">
        <div style="font-size: 24px;color: #000000">定制要求</div>
        <div class="flex_wrap flex_center flex_between">
          <div class="flex_rows flex_center orderCk" v-if="dataForm.usageScenario">
            <div class="orderTitle">用酒场景</div>
            <div>{{dataForm.usageScenario}}</div>
          </div>
          <div class="flex_rows flex_center orderCk" v-if="dataForm.designTheme">
            <div class="orderTitle">设计主题</div>
            <div>{{dataForm.designTheme}}</div>
          </div>
          <div class="flex_rows flex_center orderCk" v-if="dataForm.copywriting">
            <div class="orderTitle">文案要求</div>
            <div>{{dataForm.copywriting}}</div>
          </div>
          <div class="flex_rows flex_center orderCk" style="width: 100%;" v-if="dataForm.casePic">
            <div class="orderTitle">案例图</div>
            <div class="flex_center flex_rows flex_wrap" v-for="(item,index) in JSON.parse(dataForm.casePic)">
              <el-image
                  style="width: 100px; height: 100px;margin-right: 5px;border-radius: 10px;"
                  :src="item"
                  :preview-src-list="JSON.parse(dataForm.casePic)">
              </el-image>
            </div>
          </div>
          <div class="flex_rows flex_center orderCk" style="width: 100%;" v-if="dataForm.scenePic">
            <div class="orderTitle">场景图</div>
            <div class="flex_center flex_rows flex_wrap" v-for="(item,index) in JSON.parse(dataForm.scenePic)">
              <el-image
                  style="width: 100px; height: 100px;margin-right: 5px;border-radius: 10px;"
                  :src="item"
                  :preview-src-list="JSON.parse(dataForm.scenePic)">
              </el-image>
            </div>
          </div>
        </div>
      </div>
      <div class="flex_columns orderBg" style="margin-top: 20px;">
        <div style="font-size: 24px;color: #000000">发货信息</div>
        <div class="flex_wrap flex_center flex_between">
          <div class="flex_rows flex_center orderCk" style="width: 100%;" v-if="dataForm['itemDesc']">
            <div class="orderTitle">商品信息</div>
            <div>{{dataForm.itemDesc}}</div>
          </div>
          <div class="flex_rows flex_center orderCk">
            <div class="orderTitle">发货方式</div>
            <div>{{getDictLabel('logistics_type',dataForm.logisticsType)}}</div>
          </div>
          <div class="flex_rows flex_center orderCk" v-if="dataForm['expressCompanyName']">
            <div class="orderTitle">快递公司</div>
            <div>{{dataForm.expressCompanyName}}</div>
          </div>
          <div class="flex_rows flex_center orderCk" v-if="dataForm['trackingNo']">
            <div class="orderTitle">快递单号</div>
            <div>{{dataForm.trackingNo}}</div>
          </div>
          <div class="flex_rows flex_center orderCk" v-if="dataForm['deliveryDate']">
            <div class="orderTitle">发货时间</div>
            <div>{{dataForm['deliveryDate']}}</div>
          </div>
        </div>
      </div>
      <div class="flex_columns orderBg" style="margin-top: 20px;border: none">
        <div style="font-size: 24px;color: #000000">收货信息</div>
        <div class="flex_wrap flex_center flex_between">
          <div class="flex_rows flex_center orderCk" v-if="dataForm['receiveName']">
            <div class="orderTitle">收件人姓名</div>
            <div>{{dataForm.receiveName}}</div>
          </div>
          <div class="flex_rows flex_center orderCk" v-if="dataForm['receivePhone']">
            <div class="orderTitle">收件人电话</div>
            <div>{{dataForm.receivePhone}}</div>
          </div>
          <div class="flex_rows flex_center orderCk" style="width: 100%;" v-if="dataForm['receiveProvince']">
            <div class="orderTitle">收件人地址</div>
            <div>{{dataForm.receiveProvince+dataForm.receiveCity+dataForm.receiveCounty+dataForm.receiveAddress}}</div>
          </div>
        </div>
      </div>
      <div class="flex_columns orderBg" style="margin-top: 20px;" v-if="dataForm.invoice==='开具发票'">
        <div style="font-size: 24px;color: #000000">发票信息</div>
        <div class="flex_wrap flex_center flex_between">
          <div class="flex_rows flex_center orderCk" v-if="dataForm['orderInvoiceInfoDTO']['titleType']">
            <div class="orderTitle">抬头类型</div>
            <div>{{dataForm['orderInvoiceInfoDTO']['titleType']}}</div>
          </div>
          <div class="flex_rows flex_center orderCk"  v-if="dataForm['orderInvoiceInfoDTO']['invoiceTitle']">
            <div class="orderTitle">发票抬头</div>
            <div>{{dataForm['orderInvoiceInfoDTO']['invoiceTitle']}}</div>
          </div>
          <div class="flex_rows flex_center orderCk"  v-if="dataForm['orderInvoiceInfoDTO']['taxesNo']">
            <div class="orderTitle">纳税人识别号</div>
            <div>{{dataForm['orderInvoiceInfoDTO']['taxesNo']}}</div>
          </div>
          <div class="flex_rows flex_center orderCk" style="width: 100%;"  v-if="dataForm['orderInvoiceInfoDTO']['bankName']">
            <div class="orderTitle">开户银行</div>
            <div>{{dataForm['orderInvoiceInfoDTO']['bankName']}}</div>
          </div>
          <div class="flex_rows flex_center orderCk" v-if="dataForm['orderInvoiceInfoDTO']['bankNo']">
            <div class="orderTitle">银行账号</div>
            <div>{{dataForm['orderInvoiceInfoDTO']['bankNo']}}</div>
          </div>
          <div class="flex_rows flex_center orderCk" style="width: 100%;" v-if="dataForm['orderInvoiceInfoDTO']['registerAddress']">
            <div class="orderTitle">注册地址</div>
            <div>{{dataForm['orderInvoiceInfoDTO']['registerAddress']}}</div>
          </div>
          <div class="flex_rows flex_center orderCk"  v-if="dataForm['orderInvoiceInfoDTO']['registerPhone']">
            <div class="orderTitle">注册电话</div>
            <div>{{dataForm['orderInvoiceInfoDTO']['registerPhone']}}</div>
          </div>
          <div class="flex_rows flex_center orderCk" v-if="dataForm['orderInvoiceInfoDTO']['userEmail']">
            <div class="orderTitle">邮箱号码</div>
            <div>{{dataForm['orderInvoiceInfoDTO']['userEmail']}}</div>
          </div>
          <div class="flex_rows flex_center orderCk" v-if="dataForm['orderInvoiceInfoDTO']['userPhone']">
            <div class="orderTitle">手机号码</div>
            <div>{{dataForm['orderInvoiceInfoDTO']['userPhone']}}</div>
          </div>
          <div class="flex_rows flex_center orderCk" v-if="dataForm['orderInvoiceInfoDTO']['createDate']">
            <div class="orderTitle">创建时间</div>
            <div>{{dataForm['orderInvoiceInfoDTO']['createDate']}}</div>
          </div>
        </div>
      </div>
    </div>
<!--    <template slot="footer">-->
<!--      <el-button @click="cancellation()">取消</el-button>-->
<!--      <el-button type="primary" @click="dataFormSubmitHandle()">确认</el-button>-->
<!--    </template>-->
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
import {formatdate, formatNumber, getDictLabel} from "@/utils";

export default {
  data() {
    return {
      visible: false,
      url: '',
      dialogImageUrl: '',
      dialogVisible: false,
      imagelist:{},
      dataForm: {
        id: '',                         //订单id
        userId:'',                      //用户id
        createDateStart: '',            //开始创建时间
        createDateEnd: '',              //结束创建时间
        deliveryDateStart:'',           //开始发货时间
        deliveryDateEnd: '',            //结束发货时间
        expressCompanyName:'',          //物流公司名称
        deliveryNumber: '',             //配送单号
        dtlId: '',                      //订单明细
        orderStatus: '',                //订单的当前状态，如待付款、已支付、已发货、已完成等
        payDate: '',                    //付款时间
        payDateStart: '',               //开始付款时间
        payDateEnd: '',                 //结束付款时间
        receiveName: '',                //记录收货人的姓名。
        receivePhone: '',               //记录收货人的手机号码
        receiveProvince: '',            //记录收货地址所在的省、州或自治区
        receiveCity: '',                //记录收货地址所在的城市
        receiveCounty: '',              //记录收货地址所在的区县
        receiveAddress:'',              //记录详细的街道地址，如门牌号、楼层等
        remark: '',                     //用户对订单的附加说明或备注信息
        totalAmount: '',                //订单的总金额，等于商品价格乘以购买数量
        totalPoints: '',                //平台积分
        plateMakingFee: '',             //制版费
        orderType: '',                  //订单单号类型
        usageScenario: '',              //用酒场景
        designTheme: '',                //设计主题
        copywriting: '',                //文案要求
        casePic: '',                    //案例图
        scenePic: '',                   //场景图
      }
    }
  },
  computed: {
    dataRule() {
      return {
      }
    }
  },
  methods: {
    formatNumber,
    formatdate,
    getDictLabel,
    init() {
      this.visible = true
      this.$nextTick(() => {
        // this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.getInfo()
        }
      })
    },
    // 获取信息
    getInfo() {
      this.$http.get(`/api/userOrder/${this.dataForm.id}`).then(({data: res}) => {
        // console.log(res)
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
      }).catch(() => {
      })
    },
    //取消
    cancellation(){
      this.visible = false
      this.$emit('cancellation')
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        //console.log(this.dataForm)
        if (!valid) {
          return false
        }
      })
    }, 1000, {'leading': true, 'trailing': false}),
  }
}
</script>
<style>
.el-upload el-upload-picture-card {
  display: none;
}
.orderBg{
  padding: 30px;
  //border-radius: 10px;
  //background-color: #FFFFFF;
  border-bottom: #8a979e solid 1px;
}
.orderTitle{
  color: #979997;
  min-width: 100px;
}
.orderCk{
  margin-top: 20px;
  width: 46%;
}
</style>
